<template>
  <div class="details" v-if="detailsData">
    <div class="details-container">
      <!-- 导航条 -->
      <nav-bar>
        <div slot="left">
          <van-icon name="arrow-left" />
          <span v-goBack="{instance:this}">返回</span>
        </div>
        <div slot="title">商品详情</div>
      </nav-bar>

      <!-- 图片 -->
      <div class="img">
        <van-image :src="$utils.$filterImgUrl(detailsData.image1)" />
      </div>

      <!-- 文字描述 -->
      <div class="info">
        <p>{{ detailsData.name }}</p>
        <p>价格：{{ detailsData.presentPrice }}</p>
      </div>

      <!-- 商品详情 -->
      <div class="goods-details">
        <div class="goods-details-title">商品详情</div>
        <div class="goods-details-content" v-html="detailsData.detail"></div>
      </div>

      <!-- 商品导航 -->
      <van-goods-action class="goods-action">
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="shopCarListNum" />

        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="skuIsShow = true"
        />
      </van-goods-action>
    </div>
    <!-- 商品规格 -->
    <div class="goods-sku" v-if="skuIsShow">
      <div class="mask" @click="skuIsShow = false"></div>
      <div class="goods-sku-card">
        <div class="goods-sku-title">
          <van-image
            class="goods-sku-title-img"
            :src="$utils.$filterImgUrl(detailsData.pictureComperssPath)"
          />
          <div class="goods-sku-title-right">
            <div class="goods-sku-title-price">
              {{ $utils.$toRmb($utils.$toFixed(skuCurrent.price)) }}
            </div>
            <div class="goods-sku-title-inventory">
              剩余:{{ skuCurrent.stock_num }}
            </div>
            <div class="goods-sku-title-name">
              {{ detailsData.name }}
            </div>
          </div>
        </div>
        <div class="goods-sku-content">
          <div class="goods-sku-content-title">商品的规格:</div>
          <div class="goods-sku-content-list">
            <div
              :class="[
                'goods-sku-content-list-item',
                skuCurrentIdx === idx ? 'goods-sku-content-list-item-on' : null,
              ]"
              v-for="(item, idx) of detailsData.type"
              :key="item.id"
              @click="changeSku(item, idx)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="goods-sku-footer">
          <van-button type="danger" block @click="addShopCar"
            >添加到购物车</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState,mapMutations } = createNamespacedHelpers("shopcar");
export default {
  props: {
    id: {
      type: String,
    },
  },
  computed:{
    ...mapState(["shopCarListNum"])
  },
  data() {
    return {
      detailsData: "", //详情页数据
      skuIsShow: false, //sku是否显示
      skuCurrentIdx: 0, //选中的sku商品所引致
      skuCurrent: "", //选中的sku商品
      shopCarItem: {
        //购物车购买的单个商品
        id: "", //商品id
        name: "", //商品名字
        num: 1, //商品数量
        sku: {
          skuId: "", //规格id
          skuPrice: "", //规格价格
          specifications: "", //规格
        },
        isChecked: false, //是否勾选
      },
      shopCarList: [], //购物车购买的所有商品
    };
  },
  methods: {
    ...mapMutations(["ADD_SHOP_CAR_LIST_NUM"]),
    goBack() {
      this.$router.go(-1);
    },
    API_getDetailGoodsInfo(goodsId) {
      return this.$utils.$http.request({
        url: "goods/getDetailGoodsInfo",
        method: "POST",
        data: {
          goodsId,
        },
      });
    },
    changeSku(item, idx) {
      //切换sku
      this.skuCurrentIdx = idx;
    },
    addShopCar() {
      //添加单个商品到购物车
      let { id, pictureComperssPath, name } = this.detailsData;
      this.shopCarItem = Object.assign(this.shopCarItem, {
        id,
        pictureComperssPath,
        name,
        sku: {
          skuId: this.skuCurrent.id,
          skuPrice: this.skuCurrent.price,
          specifications: this.skuCurrent.type.name,
        },
      });
      this.addShopCarlist(this.shopCarItem);
    },
    addShopCarlist(shopCarItem) {
      //添加到购物车列表
      let shopCarList = localStorage.getItem("shopCarList");
      if (!shopCarList) {
        let arr = [];
        arr.push(shopCarItem);
        this.ADD_SHOP_CAR_LIST_NUM(arr.length)
        localStorage.setItem("shopCarList", JSON.stringify(arr));
      } else {
        let newShopCarList = JSON.parse(shopCarList);
        let arr = [];
        let bool = false;
        newShopCarList.map((item) => {
          if (
            item.id === shopCarItem.id &&
            item.sku.skuId === shopCarItem.sku.skuId
          ) {
            ++item.num;
            bool = true;
          } else {
            arr.push(item);
          }
        });
        if (bool) {
          this.ADD_SHOP_CAR_LIST_NUM(newShopCarList.length)
          localStorage.setItem("shopCarList", JSON.stringify(newShopCarList));
        } else {
          arr.push(shopCarItem);
          this.ADD_SHOP_CAR_LIST_NUM(arr.length)
          localStorage.setItem("shopCarList", JSON.stringify(arr));
        }
      }
      this.skuIsShow = false;
      this.$toast.success("已添加到购物车，请查看。");
    },
  },
  watch: {
    skuCurrentIdx: {
      //监听sku当前索引值的切换
      async handler(idx) {
        let res = await this.API_getDetailGoodsInfo(this.id);
        this.detailsData = res.data.data; //获取详情页数据

        this.skuCurrent = Object.assign({}, this.detailsData.skuComb[idx], {
          type: this.detailsData.type[idx],
        });
      },
      immediate: true,
    },
  },
};
</script>

<style>
.details {
  width: 100%;
  height: 100%;
  position: relative;
}
.details-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.img {
  width: 100%;
  height: 740px;
  background: red;
}
.info {
  padding: 20px;
  box-sizing: border-box;
  font-size: 40px;
}
.goods-details-title {
  border-bottom: 3px solid red;
  color: red;
  text-align: center;
  height: 80px;
  line-height: 80px;
  font-size: 40px;
}
.goods-sku {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* display: none; */
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.5;
  background: black;
  z-index: 3;
}
.goods-sku-card {
  width: 100%;
  height: 660px;
  background: white;
  position: fixed;
  z-index: 4;
  left: 0;
  bottom: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.goods-sku-title {
  display: flex;
  border-bottom: 3px solid rgb(211, 207, 207);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.goods-sku-title-img {
  width: 200px;
  height: 200px;
  border-radius: 40px;
  overflow: hidden;
}
.goods-sku-title-right {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.goods-sku-title-price {
  color: red;
  font-size: 60px;
}
.goods-sku-content {
  flex: 1;
}
.goods-sku-content-title {
  font-size: 28px;
  margin-bottom: 40px;
}
.goods-sku-content-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.goods-sku-content-list-item {
  width: 150px;
  height: 60px;
  background: #fff;
  border-radius: 60px;
  text-align: center;
  line-height: 60px;
  border: 2px solid;
}
.goods-sku-content-list-item-on {
  background: pink;
}
.goods-sku-footer {
  display: flex;
  justify-content: center;
}
</style>
